<template>
	<view>
		<totalMask :show.sync="isShow" :showType="showType">
			<view class="nvue-flex">
				<scroll-view class="cate-bg" scroll-x :show-scrollbar="false">
					<view class="cate-list">
						<block v-for="(item, index) in cate_list" :key="index">
							<view class="cate-item" @click="onCategory(item)">
								<text :class="item.id == cate_id ? 'cate-title-select' : 'cate-title-normal'">{{item.titile}}</text>
							</view>
						</block>
					</view>
				</scroll-view>
				
				<scroll-view class="gift-list" scroll-y :show-scrollbar="false">
					<view class="gift-view">
						<block v-for="(item, index) in list" :key="index">
							<view class="gift-item" :class="item.select ? 'gift-item-select' : ''" @click="onGift(index)">
								<image class="gift-img" :src="item.show_file"></image>
								
								<text class="gift-name">{{item.title}}</text>
								
								<text class="price">{{item.price}}金币</text>
							</view>
						</block>
					</view>
				</scroll-view>
				
				<view class="bottom">
					<view class="balance-bg">
						<image class="balance-img" src="@/static/live/balance_logo.png"></image>
						
						<text class="balance">{{balance}}</text>
						
						<view class="recharge-bg" @click.stop="onRecharge">
							<text class="recharge">充值</text>
							
							<image class="cz-arrow" src="@/static/live/recharge_arrow.png"></image>
						</view>
					</view>
					
					
					<view class="send-bg">
						<view class="send-num-bg">
							<input class="input-bg" v-model="number" placeholder="0" type="number" placeholder-class="place" maxlength="3" confirm-type="done" />
							
							<image class="arrow" src="@/static/live/gift_arrow.png"></image>
						</view>
						
						<view class="send-btn" @click.stop="onSend">
							<text class="send-btn-tit">发送</text>
						</view>
					</view>
				</view>
			</view>
		</totalMask>
	</view>
</template>

<script>
	import storage from "@/utils/storage";
	import {
		giftCategory,
		giftList,
		sendGift,
		getBalance
	} from "@/API/newLive.js";
	import st from "@/utils/showtoast.js";
	
	export default {
		data() {
			return {
				isShow: false,
				showType: 0,
				cate_list: [], //分类数组
				cate_id: "", //分类ID
				
				balance: "0",
				number: "1",
				list: [],
			}
		},
		destroyed() {
			uni.$off("YHShowGift")
			uni.$off("updateBalance")
		},
		mounted() {
			uni.$on("YHShowGift", () => {
				this.isShow = true
				this.showType = 8
				//获取余额
				this.getBalanceData()
			});
			/**
			 * 更新余额
			 */
			uni.$on("updateBalance", (res) => {
				this.balance = res
			})
			
			this.getCategoryData()
		},
		methods: {
			/**
			 * 选择分类
			 */
			onCategory(item) {
				this.cate_id = item.id
				this.getListData()
			},
			/**
			 * 选择礼物
			 */
			onGift(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].select = false
				}
				this.list[index].select = true
				this.$set(this.list)
			},
			/**
			 * 充值
			 */
			onRecharge() {
				uni.navigateTo({
					url: '/user/pages/stored/list'
				})
			},
			/**
			 * 送礼物
			 */
			onSend() {
				let item = null
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].select == true) {
						item = this.list[i]
					}
				}
				if (this.number == "") {
					st.show("请输入数量")
					return
				}
				if (item == null) {
					st.show("请选择要送的礼物")
					return
				}
				if (Math.floor(parseInt(item.price) * parseInt(this.number)) > parseInt(this.balance)) {
					st.show("余额不足,请充值")
					return
				}
				
				sendGift({
					room_id: storage.getLiveRoomInfo().id,
					gift_id: item.id,
					number: this.number,
					type: storage.getLiveType()
				}).then(res => {
					st.success("赠送成功")
				}).catch(res => {
					st.show(res.msg)
				})
			},
			
			/**
			 * 获取分类
			 */
			async getCategoryData() {
				let res = await giftCategory()
				this.cate_id = res.data.length > 0 ? res.data[0].id : ""
				this.cate_list = res.data
				
				this.getListData()
			},
			/**
			 * 获取列表
			 */
			async getListData() {
				let res = await giftList(this.cate_id)
				for (let i = 0; i < res.data.length; i++) {
					res.data[i]["select"] = false
				}
				this.list = res.data
			},
			
			/**
			 * 获取余额
			 */
			async getBalanceData() {
				let res = await getBalance()
				this.balance = res.data
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cate-bg {
		margin-top: 30rpx;
		width: 750rpx;
		border-bottom: 2rpx solid #FFFFFF;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.cate-list {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}
	.cate-item {
		height: 80rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.cate-title-normal {
		font-size: 28rpx;
		color: #C5C8D2;
	}
	.cate-title-select {
		font-size: 32rpx;
		color: $theme-color;
	}
	.gift-list {
		margin-top: 30rpx;
		width: 750rpx;
		height: 500rpx;
		overflow: hidden;
	}
	.gift-view {
		padding: 0 10rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: hidden;
	}
	.gift-item {
		margin-left: 20rpx;
		width: 160rpx;
		margin-bottom: 20rpx;
		height: 210rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.gift-item-select {
		background-color: #2A2D3E;
		border: 2rpx solid #F3F3F3;
		border-radius: 20rpx;
	}
	.gift-img {
		width: 120rpx;
		height: 120rpx;
	}
	.gift-name {
		margin-top: 5rpx;
		color: #C5C8D2;
		font-size: 24rpx;
		lines: 1;
		text-overflow: ellipsis;
	}
	.price {
		margin-top: 5rpx;
		color: #535561;
		font-size: 18rpx;
	}
	
	
	
	
	.bottom {
		margin-top: 30rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 16rpx 0 28rpx;
	}
	.balance-bg {
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
		margin-right: 30rpx;
		flex: 1;
	}
	.balance-img {
		width: 32rpx;
		height: 31rpx;
	}
	.balance {
		margin-left: 15rpx;
		color: white;
		font-size: 28rpx;
	}
	.recharge-bg {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.recharge {
		color: $theme-color;
		font-size: 28rpx;
	}
	.cz-arrow {
		margin-left: 8rpx;
		width: 12rpx;
		height: 20rpx;
	}
	
	
	.send-bg {
		height: 70rpx;
		background-color: #3B3B3F;
		border-radius: 35rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.send-num-bg {
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.input-bg {
		width: 70rpx;
		height: 50rpx;
		text-align: right;
		color: white;
		font-size: 28rpx;
	}
	.place {
		color: white;
	}
	.arrow {
		margin-left: 15rpx;
		width: 12rpx;
		height: 20rpx;
	}
	.send-btn {
		background: $grad-color;
		width: 132rpx;
		height: 70rpx;
		border-radius: 35rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.send-btn-tit {
		color: white;
		font-size: 28rpx;
	}
</style>